<template>
    <!--面包屑-->
        <div style="margin-bottom: 30px">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>
                <router-link to="/TireUsageRecordShow">轮胎使用记录管理</router-link>
            </el-breadcrumb-item>
            <el-breadcrumb-item>轮胎使用记录显示</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
    <table style="width: 80%;">
        <thead></thead>
        <tbody>
            <tr>
                <td>
                    车牌号:<el-input v-model="form.licensePlateNumber" style="width: 200px" clearable />
                </td>
                <td>
                    轮胎品牌:<el-date-picker v-model="form.tireBrand" style="width: 200px" type="date" clearable />
                </td>
                <td>
                    规格:<el-input v-model="form.specifications" style="width: 200px" clearable />
                </td>
            </tr>
            <tr>
                <td>
                    使用人:<el-input v-model="form.user" style="width: 200px" clearable />
                </td>
                <td>
                    使用日期:<el-input v-model="form.usedDate" value-forma="YYYY-MM-DD" style="width: 200px" clearable />
                </td>
                <td>
                    <!-- <div v-show="form.buttonArray.includes('getTireUsageRecordList')" class="table-operation"
                        style="margin-top: 8px;"> -->
                        <el-button type="primary" @click="getTireUsageRecordList()" :icon="Search">查询</el-button>
                    <!-- </div> -->

                    <!-- <div v-show="form.buttonArray.includes('reset')" class="table-operation" style="margin-top: 8px;"> -->
                        <el-button :icon="RefreshRight" @click="reset()">重置</el-button>
                    <!-- </div> -->
                </td>
            </tr>
        </tbody>
    </table>
    <!-- <div v-show="form.buttonArray.includes('addTireUsageRecord')" class="table-operation" style="margin-top: 8px;"> -->
        <el-button type="primary" @click="addTireUsageRecord()">新增</el-button>
    <!-- </div> -->

    <!-- <div v-show="form.buttonArray.includes('batchDel')" class="table-operation" style="margin-top: 8px;"> -->
        <el-button type="primary" @click="batchDel()">批量删除</el-button>
    <!-- </div> -->

    <el-table :data="TireUsageRecordList" border style="width: 100%;text-align: center;margin-top: 10px"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" />
        <el-table-column prop="licensePlateNumber" label="车牌号" />
        <el-table-column prop="tireBrand" label="轮胎品牌" />
        <el-table-column prop="specifications" label="规格" />
        <el-table-column prop="number" label="数量" />
        <el-table-column prop="user" label="使用人" />
        <el-table-column prop="usedDate" label="使用日期">
            <template v-slot="scope">
                <span v-if="scope.row.usedDate == null ? '' : scope.row.usedDate">{{
                        scope.row.usedDate.substring(0, 10) }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="notes" label="备注">
            <template v-slot="scope">
                {{ scope.row.notes ? scope.row.notes : '-' }}
            </template>
        </el-table-column>
        <el-table-column prop="createdDate" label="创建时间">
            <template v-slot="scope">
                <span v-if="scope.row.createdDate == null ? '' : scope.row.createdDate">{{
                        scope.row.createdDate.substring(0, 16).replace("T", " ") }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="242">
            <template v-slot="scope">
                <!-- <div v-show="form.buttonArray.includes('jumpTireUsageRecordUpd')" class="table-operation"
                    style="margin-top: 8px;"> -->
                    <el-button @click="jumpTireUsageRecordUpd(scope.row.tireUsageRecordId)" type="primary" size="small" link
                        :icon="Edit">编辑</el-button>
                <!-- </div> -->

                <!-- <div v-show="form.buttonArray.includes('delTireUsageRecord')" class="table-operation" style="margin-top: 8px;"> -->
                    <el-button @click="delTireUsageRecord(scope.row)" type="primary" size="small" link
                        :icon="CircleCloseFilled">删除</el-button>
                <!-- </div> -->

                <!-- <div v-show="form.buttonArray.includes('jumpInspect')" class="table-operation" style="margin-top: 8px;"> -->
                    <el-button @click="jumpInspect(scope.row.tireUsageRecordId)" type="primary" size="small" link
                        :icon="CircleCheckFilled">查看</el-button>
                <!-- </div> -->
            </template>
        </el-table-column>
    </el-table>

    <table style="float: right;">
        <thead></thead>
        <tbody>
            <tr>
                <td>
                    <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize"
                        :page-sizes="[3, 5, 8, 10]" :background="true" prev-text="上一页" next-text="下一页"
                        layout="total, slot, prev, pager, next" :total="form.totalCount" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                        <span>,每页{{ form.pageSize }}条,共{{ form.pageIndex }}/{{ form.pageCount }}页</span>
                        <el-button class="btn-prev" :disabled="form.pageIndex == 1"
                            @click="handleCurrentChange(1)">首页</el-button>
                    </el-pagination>
                </td>
                <td>
                    <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize"
                        :page-sizes="[3, 5, 8, 10]" :background="true" prev-text="上一页" next-text="下一页"
                        layout="slot, sizes,jumper" :total="form.totalCount" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                        <el-button class="btn-prev" :disabled="form.pageIndex == form.pageCount"
                            @click="handleCurrentChange(form.pageCount)">尾页</el-button>
                    </el-pagination>
                </td>
            </tr>
        </tbody>
    </table>

    <el-dialog v-model="dialogFormVisible" title="轮胎使用记录详情" width="700">
        <table border
            style="border-collapse: collapse; margin-left: 10%;width: 500px;height: 500px;text-align: center;">
            <thead></thead>
            <tbody>
                <tr>
                    <td>车牌号:</td>
                    <td>
                        {{ form1.licensePlateNumber }}
                    </td>
                </tr>
                <tr>
                    <td>轮胎品牌:</td>
                    <td>
                        {{ form1.tireBrand }}
                    </td>
                </tr>
                <tr>
                    <td>规格:</td>
                    <td>
                        {{ form1.specifications }}
                    </td>
                </tr>
                <tr>
                    <td>数量:</td>
                    <td>
                        {{ form1.number }}
                    </td>
                </tr>
                <tr>
                    <td>使用人:</td>
                    <td>
                        {{ form1.user }}
                    </td>
                </tr>
                <tr>
                    <td>使用日期:</td>
                    <td>
                        {{ form1.usedDate.substring(0, 10) }}
                    </td>
                </tr>
                <tr>
                    <td>备注:</td>
                    <td>
                        {{ form1.notes }}
                    </td>
                </tr>
            </tbody>
        </table>
    </el-dialog>

</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Edit, CircleCheckFilled, CircleCloseFilled, RefreshRight } from '@element-plus/icons-vue'
const router = useRouter()
const route = useRoute()
const form = reactive({
    tireBrand:"",
    licensePlateNumber:'',
    specifications:'',
    user:'',
    usedDate:'',
    companyID: '',
    pageIndex: 1,
    pageSize: 3,
    totalCount: 0,
    pageCount: 0,
    buttonArray: ['addTireUsageRecord','batchDel','jumpTireUsageRecordUpd','delTireUsageRecord','getTireUsageRecordList','reset','jumpInspect']
})

//根据菜单id查询按钮功能权限
const getRoleMenuFun = () => {
    axios.get('http://47.96.109.219:5202/api/RoleMenuFun/RoleMenuFunId', {
        params: {
            menuId: route.query.id
        }
    }).then(res => {
        console.log(res);
        form.buttonArray = res.data.data
    }).catch(err => {
        console.log(err);

    })
}

const form1 = reactive({
    createdBy: "张三",  // 创建人   
    createdDate: new Date(),    // 创建日期
    updatedBy: "张三",  // 更新人
    updatedDate: new Date(),     // 更新日期
    // deletedBy: "",  // 删除人
    // deletedDate: "",    // 删除日期
    isDeleted: false,        // 是否删除  
    tireUsageRecordId: 0,        // 轮胎使用记录ID
    companyID: "",          //公司ID
    user_Id: 0,           // 用户ID
    licensePlateNumber: "",  // 车牌号
    tireBrand: "",  // 轮胎品牌
    specifications: "",  // 规格
    number: '',  // 数量
    user: "",    // 使用人
    usedDate: "",  // 使用日期
    notes: ""   // 备注
})

//显示轮胎使用记录   
const TireUsageRecordList = ref([])
const getTireUsageRecordList = () => {
    axios.get("/carread/api/TireUsageRecord/Show", {
        params: {
            TireBrand: form.tireBrand,
            LicensePlateNumber: form.licensePlateNumber,
            UsedDate: form.usedDate || null,
            Specifications: form.specifications,
            User: form.user,
            CompanyID: form.companyID,
            PageIndex: form.pageIndex,
            PageSize: form.pageSize,
        }
    })
        .then((res) => {
            TireUsageRecordList.value = res.data.data.list
            form.totalCount = res.data.data.totalCount
            form.pageCount = res.data.data.pageCount
        })
        .catch((err) => {
            console.log(err)
        })
}

//分页
const handleSizeChange = (val: number) => {
    form.pageSize = val
    getTireUsageRecordList()
}
const handleCurrentChange = (val: number) => {
    form.pageIndex = val
    getTireUsageRecordList()
}

//删除
const delTireUsageRecord = (row: any) => {
    ElMessageBox.confirm(
        '确认要删除吗?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.post("/carwrite/api/TireUsageRecord/Delete", row)
                .then((res) => {
                    if (res.data.code == 0) {
                        ElMessage.success("删除成功");
                        getTireUsageRecordList();
                    }
                })
                .catch((err) => {
                    console.log(err)
                })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消该操作',
            })
        })
}

//批删选中
const multipleSelection = ref([])
const handleSelectionChange = (val: any) => {
    multipleSelection.value = val
    console.log(multipleSelection.value)
}
//批删
const batchDel = () => {
    ElMessageBox.confirm(
        '确认要删除吗?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            var ids: any = [];
            multipleSelection.value.forEach((item: any) => {
                ids.push(item.tireUsageRecordId)
                console.log(ids)
            })
            axios.post("/carwrite/api/TireUsageRecord/BatchDel?TireUsageRecordId=" + ids)
                .then((res) => {
                    if (res.data.code == 0) {
                        ElMessage.success("删除成功");
                        getTireUsageRecordList();
                    }
                })
                .catch((err) => {
                    console.log(err)
                })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消该操作',
            })
        })
}

//跳转修改页面
const jumpTireUsageRecordUpd = (tireUsageRecordId: any) => {
    router.push({
        name: '/TireUsageRecordUpd',
        query: {
            tireUsageRecordId: tireUsageRecordId
        }
    })
}

const dialogFormVisible = ref(false);
//打开查看弹窗
const jumpInspect = (tireUsageRecordId: any) => {
    dialogFormVisible.value = true;
    getTireUsageRecordModel(tireUsageRecordId);
}
//返填
const getTireUsageRecordModel = (tireUsageRecordId: any) => {
    axios.get("/carread/api/TireUsageRecord/Backfill?TireUsageRecordId=" + tireUsageRecordId)
        .then(res => {
            form1.createdBy = res.data.data.createdBy;
            form1.createdDate = res.data.data.createdDate;
            form1.updatedBy = res.data.data.updatedBy;
            form1.updatedDate = res.data.data.updatedDate;
            // form1.deletedBy= res.data.data.deletedBy;
            // form1.deletedDate= res.data.data.deletedDate;
            form1.isDeleted = res.data.data.isDeleted;
            form1.companyID = res.data.data.companyID;
            form1.user_Id = res.data.data.user_Id;
            form1.licensePlateNumber = res.data.data.licensePlateNumber;
            form1.tireBrand = res.data.data.tireBrand;
            form1.specifications = res.data.data.specifications;
            form1.number = res.data.data.number;
            form1.user = res.data.data.user;
            form1.usedDate = res.data.data.usedDate;
            form1.notes = res.data.data.notes;
            form1.tireUsageRecordId = res.data.data.tireUsageRecordId;
        })
        .catch(err => {
            console.log(err);
        })
}



//重置查询条件
const reset = () => {
    form.tireBrand = ''
    form.licensePlateNumber = ''
    form.usedDate = ''
    form.specifications = ''
    form.user = ''
    getTireUsageRecordList()
}

//跳转新增收费页面
const addTireUsageRecord = () => {
    router.push("TireUsageRecordAdd")
}

onMounted(() => {
    getTireUsageRecordList();
    getRoleMenuFun();
})
</script>